<template>
    <div class="common-layout">
        <el-container>
            <Aside :is-folded="isFolded"></Aside>
            <el-container>
                <Header :toggleIcon="toggleIcon" :is-folded="isFolded"></Header>
                <Main></Main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import Aside from '@/components/aside.vue';
import Header from '@/components/header.vue';
import Main from '@/components/main.vue';
const isFolded = ref(false);
const toggleIcon = () => {
    isFolded.value = !isFolded.value;
}


</script>

<style scoped lang="less">
.common-layout {
    height: 100vh; // 确保布局占满整个视口高度

    .el-container {
        height: 100%;
        overflow: hidden;
        .el-container {
            flex-direction: column; // 确保内部容器是垂直布局

            .el-header {
                background-color: #b3c0d1;
                color: var(--el-text-color-primary);
                line-height: 60px;
            }

            .el-main {
                background-color: #e9eef3;
                color: var(--el-text-color-primary);
                padding: 20px;
            }
        }
    }
}
</style>
